<template>
   <div class="stop-bg" v-if="isStop">
        <div class="stop">
            <img src="../../../assets/images/stop2.png" class="stop-img" />
            <div class="stop-con">
                <div class="stop-con-title">本店已经打烊啦</div>
                <div class="stop-con-time">营业时间：</div>
                <div class="stop-con-time">{{shopinfo.opentime}}</div>
            </div>
            <div class="know" @click="hiddenStop">我知道了</div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'hadStop',
  components: {},
  props: {
    shopinfo: Object
  },
  data() {
    return {
        isStop: false
    }
  },
  mounted(){
  },
  watch: {
      shopinfo() {
        if(this.shopinfo.is_open == 0) {
            this.isStop = true
        }
      }
  },
  methods: {
    hiddenStop() {
        this.isStop = !this.isStop
    }
  }
} 
</script>

<style scoped>
.stop-bg{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 99
  }
  .stop{
    width: 85%;
    background: #fff;
    text-align: center;
    border-radius: 10px;
  }
  .stop-img{
      width: 125px;
      margin-top: 15px;
  }
  .stop-con-title{
      font-size: 16px;
      color: #333;
      margin: 15px 0 10px;
  }
  .stop-con-time{
      font-size: 14px;
      color: #999;
      margin-top: 4px;
  }
  .know{
      width: 100%;
      margin-top: 15px;
      line-height: 45px;
      border-top: 1px solid #eee;
      font-size: 16px;
      color: #333;
  }
</style>